<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:h="http://java.sun.com/jsf/html">
    <p:blockUI block=":frmGestionarOpciones:panBuscaOpciones" trigger=":frmGestionarOpciones:buscarButton" widgetVar="blkPanelOpciones">
        Espere mientras se cargan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <p:blockUI block=":frmGestionarOpciones:pnlOptree" widgetVar="blkOpTreePanel">
        Espere mientras se cargan los datos<br /> 
        <p:graphicImage value="/resource/images/loading.gif" style="width: 65px; height: 50px;"/>
    </p:blockUI>
    <h:form id="frmGestionarOpciones" onkeypress="if (event.keyCode == 13) return false;">
        <p:growl showSummary="false" showDetail="true" id="msjOpciones"/>
        <p:panel id="panOpciones" >
            <table style="width:100%;" >  
                <tbody>
                    <tr>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <p:menubar style="width: 99%;" id="menuOpciones">
                                <p:menuitem value="Nuevo" icon="ui-icon-person" actionListener="#{opcionController.nuevo}"
                                            update=":dlgDetalleOpcion, :frmDetalleOpcion, msjOpciones">
                                </p:menuitem>
                                <p:menuitem value="Modificar" icon="ui-icon-pencil" actionListener="#{opcionController.load}" 
                                            update=":dlgDetalleOpcion, :frmDetalleOpcion, msjOpciones">
                                </p:menuitem>
                                <p:menuitem value="Limpiar" icon="ui-icon-trash" process="@this"
                                             actionListener="#{moduloController.limpiarOpciones}"
                                            update=":frmGestionarOpciones:pnlOptreeIns,:frmGestionarOpciones:grdOpciones,:frmGestionarOpciones:txtBusOpcion, msjOpciones">
                                </p:menuitem>
                                <p:menuitem value="Configurar Acciones" icon="ui-icon-wrench" actionListener="#{opcionController.abrirAcciones}"
                                            update=":dlgGestionarAcciones, :frmGestionarAcciones, msjOpciones">
                                </p:menuitem>
                                <p:menuitem value="Salir" icon="ui-icon-pencil" oncomplete="wGestionarOpciones.hide()"
                                            process="@this">
                                </p:menuitem>
                            </p:menubar>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div style="float: left;width: 720px;height: 340px">
                                <p:panel id="panBuscaOpciones" style="width: 710px;height: 330px;margin-top: 4px;">
                                    <table style="width:100%" >
                                        <thead>
                                            <tr>
                                                <td>
                                                    <p class="nota" style="text-align: justify;" >
                                                        <span class="ui-icon ui-icon-info mensajeInfo" style="float: left;"></span>
                                                        <label style="float: left;margin-left: 5px;">Para visualizar el árbol de opciones dar click sobre la fila seleccionada.</label>
                                                    </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <table style="width:60%" cellpadding="5" cellspacing="8">
                                                        <tr>
                                                            <td><h:outputText value="Opción :"/> </td>
                                                            <td>
                                                                <p:inputText id="txtBusOpcion" value="#{opcionController.txtBusquedaOpcion}" style="width: 240px;" maxlength="250">
                                                                </p:inputText>
                                                            </td>
                                                            <td> 
                                                                <p:commandButton process="@this, txtBusOpcion" value="Buscar" icon="ui-icon-search"  id="buscarButton"
                                                                                 actionListener="#{opcionController.search}"
                                                                                 update=":frmGestionarOpciones:grdOpciones, :frmGestionarOpciones:pnlOptreeIns, msjOpciones"/> 
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <div style="height: 250px; overflow-y: auto;overflow-x:hidden;">
                                                        <p:dataTable id="grdOpciones" var="item" 
                                                                     value="#{opcionController.lstOpcion}" 
                                                                     rowKey="#{item.id}" 
                                                                     selection="#{opcionController.selectedOpcion}" 
                                                                     selectionMode="single" paginator="false" 
                                                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                                                     rowsPerPageTemplate="5,10,15,20"
                                                                     emptyMessage="No se encontraron resultados."
                                                                     rowIndexVar="index">
                                                            <p:ajax event="rowSelect" listener="#{opcionController.onRowSelect}"  onstart="blkOpTreePanel.show()" 
                                                                            update=":frmGestionarOpciones:pnlOptreeIns, :frmGestionarOpciones:grdOpciones, :frmGestionarOpciones:msjOpciones" oncomplete="blkOpTreePanel.hide()" /> 
                                                            <p:column width="40" style="text-align: center; width: 40px" >
                                                                <f:facet name="header">
                                                                    <h:outputText value="Id"/>
                                                                </f:facet>
                                                                <div style="text-align: center;" > 
                                                                    <h:outputText value="#{item.id}" >
                                                                        <f:convertNumber pattern="0000" />
                                                                    </h:outputText>
                                                                </div>          
                                                            </p:column>
                                                            <p:column width="100" style="text-align: left; width: 100px" >
                                                                <f:facet name="header">
                                                                    <h:outputText value="Opción Padre"/>
                                                                </f:facet>
                                                                <h:outputText value="#{(item.nidOpcionPadre!=null)?item.nidOpcionPadre.txtOpcion:'-'}" />
                                                            </p:column>
                                                            <p:column width="150" style="text-align: left; width: 150px">
                                                                <f:facet name="header">
                                                                    <h:outputText value="Opción"/>
                                                                </f:facet>                                                
                                                                <h:outputText value="#{item.txtOpcion}" />                                                
                                                            </p:column>
                                                            <p:column width="150" style="text-align: center; width: 150px">
                                                                <f:facet name="header">
                                                                    <h:outputText value="Fecha de Caducidad"/>
                                                                </f:facet>                                                
                                                                <h:outputText value="#{item.fecCaducidad}" >
                                                                    <f:convertDateTime pattern="dd/MM/yyy HH:mm" locale="es_PE" type="date" timeZone="EST"/>
                                                                </h:outputText>
                                                            </p:column>
                                                            <p:column width="60" style="text-align: center; width: 60px">
                                                                <f:facet name="header">
                                                                    <h:outputText value="Orden"/>
                                                                </f:facet>                                                
                                                                <h:outputText value="#{item.numOrden}" />                                                
                                                            </p:column>
                                                            <p:column width="60" style="text-align: center; width: 60px">
                                                                <f:facet name="header">
                                                                    <h:outputText value="Activo"/>
                                                                </f:facet>                                                
                                                                <p:selectBooleanCheckbox disabled="true" value="#{item.flgActivo == '1'}"/>
                                                            </p:column>
                                                        </p:dataTable>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </p:panel>
                            </div>
                            <div style="height: 340px; width: 320px; overflow:hidden; float: left;">
                                <h:panelGrid id="pnlOptree" style="width: 100%;height: 100%;">
                                    <h:panelGrid id="pnlOptreeIns" style="width: 100%;height: 100%;">
                                        <p:tree value="#{opcionController.opcionTree}" var="per" style="width: 340px;height: 333px;overflow:hidden;" 
                                                selectionMode="single" selection="#{opcionController.selectedOpcionNode}"
                                                dynamic="true" > 
                                            <p:treeNode expandedIcon="ui-icon-folder-open" 
                                                        collapsedIcon="ui-icon-folder-collapsed" > 
                                                <h:outputText value="#{per.txtOpcion}  ( #{per.numOrden} )" /> 
                                            </p:treeNode>  
                                        </p:tree>
                                    </h:panelGrid>
                                </h:panelGrid>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </p:panel>
    </h:form>
</ui:composition>